Données interactives

Column

Filtres

Tableau

Column

Graphique interactif

Carte interactive

Information

Crédits

Cette étude visuelle a été réalisée à partir des données disponibles sur le site data.gouv.fr Structures sportives 2021 - Ville de Clermont-Ferrand.

Self-service interactive tools have great power to support decisions by policy-makers. Shiny apps are a natural fit for this, but it’s not always easy to share them within the public sector. This is due to issues like a lack of server space, highly sensitive data and users who aren’t R-savvy.

We’ve approached this problem in the UK’s Department for Education by sharing interactive HTML widgets – embeddable JavaScript visualisation libraries – within RMarkdown outputs. Interactivity is, however, limited because selections in one widget don’t impact the data presented in another.

Joe Cheng’s Crosstalk package overcomes this with shared data objects that react to user inputs, altering the content of multiple widgets on the fly. I’ll explain how I used Crosstalk to develop a ‘pseudo-app’ for exploring schools data with the Leaflet (maps), Plotly (charts) and DT (tables) widgets inside the Flexdashboard framework and how I shared it easily with policy-making users as a static HTML file for exploration in the browser.

Note that this material is restricted to published data only and does not reflect or constitute official government policy.

How to use

Filters

Vous pouvez :

  • sélectionnez une ou plusieurs collectivités locales dans le menu déroulant (supprimez-les avec votre touche retour arrière)
  • sélectionnez une ou plusieurs notes Ofsted en utilisant les cases à cocher
  • sélectionnez la phase d’enseignement avec les cases à cocher
  • faites glisser le curseur pour sélectionner un nombre de pupilles
  • faites glisser le curseur pour filtrer par pourcentage d’élèves recevant des repas scolaires gratuits

Interactive map

Vous pouvez :

  • cliquer pour saisir et faire glisser la carte autour
  • zoomer avec les boutons ‘+’ et ‘–’ (en haut à gauche) ou avec la molette de votre souris
  • cliquer sur un marqueur pour afficher une fenêtre contextuelle contenant des informations sur cette infrastructure sportive
  • cliquer sur le bouton montrant un carré brisé (en haut à gauche sous les options de zoom) pour sélectionner des points sur la carte à l’aide d’une fenêtre déplaçable (cliquez et maintenez l’icône de grille en haut à gauche) et redimensionnable (cliquez et faites glisser les cases blanches dans chaque coin)

Interactive table

You can:

  • filter each column by typing in the boxes under each column header
  • sort the columns (ascending and descending) by clicking on the column header
  • change which columns are visible by clicking the Column visibility button
  • click ‘CSV’ or ‘Excel’ to download the filtered data to a .csv file or a .xlsx
  • see how many entries remain after filtering in the bottom-left, where it says ‘Showing X to Y of Z entries’

Tools

R v3.4.4 and RStudio v1.1.442 were used to build this tool.

The packages used were:

The code for this tool is available from github.com/matt-dray/earl18-crosstalk. The presentation is available from github.com/matt-dray/earl18-presentation.

---
title: "Répartition des installations sportives - Clermont-Ferrand"
author: "Brice ALTSCHULER"
output:
  flexdashboard::flex_dashboard:
    theme: journal
    source_code: embed
    self_contained : TRUE
    favicon : data/marianne-4.jpg
---

```{r setup, include=FALSE}
# prep workspace
library(tidyverse)
library(leaflet)  # interative mapping
library(leaflet.extras)
library(DT)  # interactive tables
library(crosstalk)  # inter-widget interactivity
library(plotly)
library(htmltools)
library(leafem)
library(sf)
```

```{r chargement des données, include=FALSE}
test_sd <- read.csv("data/vecteurs/structures_sportives.csv")
test_sd[test_sd == "" ] <- NA
sd <- SharedData$new(test_sd)
```


Données interactives {data-icon="ion-stats-bars"}
=====================================  

Column {data-width=400}
-------------------------------------

### Filtres


```{r filtres}
filter_select(
  id = "Nom",
  label = "Nom",
  sharedData = sd,
  group = ~Nom
)

bscols(
  filter_checkbox(
    id = "Type",
    label = "Type",
    sharedData = sd,
    group = ~Type,
    columns = 2
  )#,
  # filter_checkbox(
  #   id = "Type",
  #   label = "Type",
  #   sharedData = sd,
  #   group = ~Type
  # )
)

# bscols(
  # filter_slider(
  #   id = "date",
  #   label = "Date",
  #   sharedData = sd,
  #   column = ~date,
  #   step = 1,
  #   round = TRUE,
  #   sep = "",
  #   ticks = FALSE
  # ),
  # filter_slider(
  #   id = "Nb",
  #   label = "Quantité de voitures",
  #   sharedData = sd,
  #   column = ~Nb,
  #   step = 1,
  #   round = TRUE,
  #   sep = "",
  #   ticks = FALSE
  # )
# )
```



### Tableau


```{r Tableau}
sd %>%
  DT::datatable(
    caption = NULL,   #Titre
    filter = "top",   # filtrage sur chaque colonne
    extensions = c(
      "Buttons",      # Ajout des boutons 'download'
      "Scroller"      # pour scroler le tableau
    ),
    rownames = FALSE,  # Retire les titres des colonnes
    style = "bootstrap",
    class = "compact",
    width = "100%",
      options = list(
      dom = "Blrtip",  # specify content (search box, etc)
      deferRender = TRUE,
      scrollY = 300,
      scroller = TRUE,
      columnDefs = list(
        list(
          visible = FALSE,
          targets = c(0, 4:8)
        )
      ),
      buttons = list(
        I("colvis"),  # turn columns on and off
        "csv",  # download as .csv
        "excel"  # download as .xlsx
      )
    )
    # colnames = c(
    #   "URN" = "sch_urn",
    #   "Name" = "sch_name",
    #   "Type" = "sch_type",
    #   "Type group" = "sch_type_group",
    #   "Phase" = "sch_phase",
    #   "Ofsted rating" = "ofsted_rating",
    #   "Inspection date" = "ofsted_date",
    #   "Pupil count" = "pupil_count",
    #   "Pupil gender" = "pupil_gender",
    #   "FSM per cent" = "pupil_percent_fsm",
    #   "Town" = "geo_town",
    #   "Postcode" = "geo_postcode",
    #   "Local authority" = "geo_la",
    #   "Rural-urban class" = "geo_urban_rural",
    #   "RSC region" = "geo_rsc_region",
    #   "Coordinates" = "geometry"
    # )
  )
```



Column {.tabset data-width=300}
-------------------------------------
    
### Graphique interactif


```{r}
  p <- plot_ly(sd, x = ~Type, y = ~Categorie) #%>% 
  # add_markers(alpha = 0.5)# %>%
  # highlight("plotly_selected", dynamic = TRUE)
```

```{r} p ```
### Carte interactive ```{r} iconSet <- iconList( red = makeIcon("data/pin.png", iconWidth = 33, iconHeight = 45)) ``` ```{r include=FALSE} carte_monde <- st_read( dsn = "data/vecteurs/planisphere/TM_WORLD_BORDERS-0.3.shp" ) ``` ```{r} #Création du data filtré - support de la carte de chaleur (intégrée dans Leaflet) sites_heatmap <- test_sd%>% drop_na(Latitude) ``` ```{r map} sd %>% leaflet::leaflet() %>% addTiles( attribution = paste( "© OpenStreetMap contributors", "© Clermont Auvergne Métropole" )) %>% addPolygons( data = carte_monde, # Ajout du planisphère color = 'black', weight = 1, opacity = 0, fillOpacity = 0, fill = FALSE, group = "Vue générale" )%>% addMouseCoordinates( proj4string = 'DMS' )%>% # Ajout des coordonnées leaflet::addAwesomeMarkers( popup = ~paste0( "
", test_sd$Nom, "
", "", "", "", "", "", "", "", "", "", "", "", "", ""#, # "", # "", # # "", # "", # "", # "", # "", # # "", # "", # "", # "", # "" ), # end popup() icon = awesomeIcons( library = "ion", icon = ifelse( test = test_sd$Type == "Athletisme", yes = "ion-android-star-outline", no = "ion-android-radio-button-off" ), iconColor = "white", markerColor = ifelse( test = test_sd$Type == "Gymnase", yes = "red", no = "blue" ) ),group = "Localisation" ) %>% # end addAwesomeMarkers() addHeatmap( # Ajout de la carte de chaleur data = sites_heatmap, lng = ~Longitude, lat = ~Latitude, blur = 10,#27 max = 0.55,#0.02 radius = 15,#15 group = "Répartition infrastructures sportives Heatmap")%>% addMarkers( # Ajout de la carte de densité chifrée data = test_sd, lng = ~Longitude, lat = ~Latitude, icon = iconSet, popup = paste("Nom :",test_sd$Nom, "
", "Catégorie :", test_sd$Categorie,"
", "Type :", test_sd$Type, "
", "Adresse :", test_sd$Adresse,"
"), group = "Répartition infrastructures sportives", clusterOptions = markerClusterOptions() )%>% addLayersControl( # Ajout du menu de gestion des couches baseGroups = (c("Localisation", "Répartition infrastructures sportives Heatmap", "Répartition infrastructures sportives")) # , # overlayGroups = "Sites" )%>% setView(lng = 3, lat = 46,zoom = 5)%>% addMeasure( # Ajout de la fonctionnalité de prise de mesures primaryLengthUnit = "kilometers", # Configuration des unités de mesure primaryAreaUnit = "sqmeters" ) %>% # addLegend( title = "Légende", # Ajout de la légende # "bottomright", colors = "magenta", labels = "Sites" # )%>% addScaleBar(position = "bottomleft", # Ajout de l'échelle options = scaleBarOptions(metric = TRUE) )%>% setView( # Définition de la zone de visualisation par défaut 3, 46, zoom = 5 )%>% addHomeButton( # Création d'un bouton de retour à la vue d'origine (setView) position = "bottomleft", group = "Vue générale" )%>% addFullscreenControl(position = "topleft")%>% removeMouseCoordinates( )%>% # Ajout de la fonction "plein écran" addMiniMap(position = "bottomleft", minimized = F, strings = list(hideText = "Hide MiniMap", showText = "Show MiniMap")) ``` Information {data-orientation=rows data-icon="fa-info-circle"} ===================================== ### Crédits Cette étude visuelle a été réalisée à partir des données disponibles sur le site data.gouv.fr [Structures sportives 2021 - Ville de Clermont-Ferrand ](https://www.data.gouv.fr/fr/datasets/structures-sportives-2021-ville-de-clermont-ferrand/). > Self-service interactive tools have great power to support decisions by policy-makers. Shiny apps are a natural fit for this, but it's not always easy to share them within the public sector. This is due to issues like a lack of server space, highly sensitive data and users who aren't R-savvy. > >We've approached this problem in the UK's Department for Education by sharing interactive HTML widgets – embeddable JavaScript visualisation libraries – within RMarkdown outputs. Interactivity is, however, limited because selections in one widget don’t impact the data presented in another. > >[Joe Cheng's Crosstalk package](http://rstudio.github.io/crosstalk/) overcomes this with shared data objects that react to user inputs, altering the content of multiple widgets on the fly. I'll explain how I used Crosstalk to develop a 'pseudo-app' for exploring schools data with the Leaflet (maps), Plotly (charts) and DT (tables) widgets inside the Flexdashboard framework and how I shared it easily with policy-making users as a static HTML file for exploration in the browser. Note that this material is restricted to **published data only** and **does not reflect or constitute official government policy**. ### How to use #### Filters Vous pouvez : * sélectionnez une ou plusieurs collectivités locales dans le menu déroulant (supprimez-les avec votre touche retour arrière) * sélectionnez une ou plusieurs notes Ofsted en utilisant les cases à cocher * sélectionnez la phase d'enseignement avec les cases à cocher * faites glisser le curseur pour sélectionner un nombre de pupilles * faites glisser le curseur pour filtrer par pourcentage d'élèves recevant des repas scolaires gratuits #### Interactive map Vous pouvez : * cliquer pour saisir et faire glisser la carte autour * zoomer avec les boutons '+' et '--' (en haut à gauche) ou avec la molette de votre souris * cliquer sur un marqueur pour afficher une fenêtre contextuelle contenant des informations sur cette infrastructure sportive * cliquer sur le bouton montrant un carré brisé (en haut à gauche sous les options de zoom) pour sélectionner des points sur la carte à l'aide d'une fenêtre déplaçable (cliquez et maintenez l'icône de grille en haut à gauche) et redimensionnable (cliquez et faites glisser les cases blanches dans chaque coin) #### Interactive table You can: * filter each column by typing in the boxes under each column header * sort the columns (ascending and descending) by clicking on the column header * change which columns are visible by clicking the Column visibility button * click 'CSV' or 'Excel' to download the filtered data to a .csv file or a .xlsx * see how many entries remain after filtering in the bottom-left, where it says 'Showing X to Y of Z entries' ### Tools [R v3.4.4](https://www.r-project.org/) and [RStudio v1.1.442](https://www.rstudio.com/) were used to build this tool. The packages used were: * [Flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/) to create a frame for the content * [Leaflet](https://rstudio.github.io/leaflet/) for the interactive map * [DT](https://rstudio.github.io/DT/) for the interactive table * [Crosstalk](https://rstudio.github.io/crosstalk/) for widget interactivity * [Ion icons](https://ionicons.com/) and [Font Awesome](https://fontawesome.com/) for icons The code for this tool is available from [github.com/matt-dray/earl18-crosstalk](https://github.com/matt-dray/earl18-crosstalk). The presentation is available from [github.com/matt-dray/earl18-presentation](https://github.com/matt-dray/earl18-presentation).
Nom : ", test_sd$Categorie, "
Catégorie : ", test_sd$Type, "
Type : ", test_sd$sch_type, "
Location", test_sd$geo_town, ", ", sch$geo_postcode, "
LA", test_sd$geo_la, "